<!--
 * @Author: ZAL 2177624751@qq.com
 * @Date: 2025-03-31 21:30:00
 * @LastEditors: ZAL 2177624751@qq.com
 * @LastEditTime: 2025-03-31 21:50:49
 * @Description: 个人资料页面
-->
<template>
  <view class="container">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <view class="avatar-wrapper" @click="handleAvatarUpload">
        <u-avatar :src="userInfo.avatarUrl" size="160" shape="circle"></u-avatar>
        <view class="upload-hint">
          <u-icon name="camera-fill" size="24" color="#fff"></u-icon>
          <text>点击更换头像</text>
        </view>
      </view>
    </view>

    <!-- 基本信息表单 -->
    <view class="form-section">
      <view class="form-group">
        <view class="form-item">
          <text class="label">昵称</text>
          <input 
            class="input" 
            v-model="userInfo.nickname" 
            placeholder="请输入昵称"
            @blur="handleNicknameChange"
          />
        </view>
        <view class="form-item">
          <text class="label">手机号</text>
          <text class="value">{{ userInfo.phone }}</text>
          <view class="action-btn" @click="handlePhoneChange">修改</view>
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <picker 
            :range="genderOptions" 
            :value="genderIndex" 
            @change="handleGenderChange"
          >
            <view class="picker-value">
              {{ genderOptions[genderIndex] }}
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">生日</text>
          <picker 
            mode="date" 
            :value="userInfo.birthday" 
            @change="handleBirthdayChange"
          >
            <view class="picker-value">
              {{ userInfo.birthday || '请选择生日' }}
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 账号安全 -->
    <view class="form-section">
      <view class="section-title">账号安全</view>
      <view class="form-group">
        <view class="form-item" @click="handlePasswordChange">
          <text class="label">登录密码</text>
          <view class="action-btn">修改</view>
        </view>
        <view class="form-item" @click="handleEmailChange">
          <text class="label">邮箱绑定</text>
          <view class="action-btn">{{ userInfo.email ? '修改' : '绑定' }}</view>
        </view>
      </view>
    </view>

    <!-- 其他设置 -->
    <view class="form-section">
      <view class="section-title">其他设置</view>
      <view class="form-group">
        <view class="form-item" @click="handlePrivacyChange">
          <text class="label">隐私设置</text>
          <view class="action-btn">设置</view>
        </view>
        <view class="form-item" @click="handleNotificationChange">
          <text class="label">消息通知</text>
          <view class="action-btn">设置</view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout">退出登录</view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuthStore } from '../../../store/auth'

const authStore = useAuthStore()

// 用户信息
const userInfo = computed(() => {
  return authStore.userInfo || {
    avatarUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
    nickname: '',
    phone: '',
    gender: 0,
    birthday: '',
    email: ''
  }
})

// 性别选项
const genderOptions = ['未知', '男', '女']
const genderIndex = computed(() => userInfo.value.gender)

// 处理头像上传
const handleAvatarUpload = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      // TODO: 实现头像上传逻辑
      console.log('选择图片:', tempFilePath)
    }
  })
}

// 处理昵称修改
const handleNicknameChange = () => {
  // TODO: 实现昵称修改逻辑
  console.log('修改昵称:', userInfo.value.nickname)
}

// 处理手机号修改
const handlePhoneChange = () => {
  uni.navigateTo({
    url: '/pages/user/components/phone-change'
  })
}

// 处理性别修改
const handleGenderChange = (e) => {
  const index = e.detail.value
  // TODO: 实现性别修改逻辑
  console.log('修改性别:', genderOptions[index])
}

// 处理生日修改
const handleBirthdayChange = (e) => {
  // TODO: 实现生日修改逻辑
  console.log('修改生日:', e.detail.value)
}

// 处理密码修改
const handlePasswordChange = () => {
  uni.navigateTo({
    url: '/pages/user/components/password-change'
  })
}

// 处理邮箱修改
const handleEmailChange = () => {
  uni.navigateTo({
    url: '/pages/user/components/email-change'
  })
}

// 处理隐私设置
const handlePrivacyChange = () => {
  uni.navigateTo({
    url: '/pages/user/components/privacy'
  })
}

// 处理消息通知设置
const handleNotificationChange = () => {
  uni.navigateTo({
    url: '/pages/user/components/notification'
  })
}

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        authStore.logout()
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);
}

.avatar-section {
  background-color: #fff;
  padding: 40rpx 0;
  margin-bottom: 20rpx;

  .avatar-wrapper {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin: 0 auto;

    .upload-hint {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 0 0 80rpx 80rpx;
      padding: 10rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      text {
        font-size: 20rpx;
        color: #fff;
        margin-top: 4rpx;
      }
    }
  }
}

.form-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 30rpx 0 20rpx;
  }

  .form-group {
    .form-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .label {
        width: 160rpx;
        font-size: 28rpx;
        color: #333;
      }

      .input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
        color: #666;
      }

      .picker-value {
        flex: 1;
        font-size: 28rpx;
        color: #666;
      }

      .action-btn {
        font-size: 28rpx;
        color: #00b578;
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #ff4d4f;
}

.gender-popup {
  .gender-option {
    &.active {
      background-color: rgba(0, 181, 120, 0.1);
      text {
        color: #00b578;
      }
    }
  }
}

:deep(.u-icon) {
  color: #00b578;
}
</style> 